<template>
	<cu-custom :bgcolor="'#fff'"/>
	<view class="p-2 body">
		<view class="uni-form-item uni-column">
			<view class="title font-md">手机号</view>
			<input class="uni-input border-bottom" type="number" placeholder="请输入手机号" v-model="phoneNumber" />
		</view>
		<view class="uni-form-item uni-column">
			<view class="title font-md">密码</view>
			<input class="uni-input border-bottom" password type="text" placeholder="请输入密码" v-model="passWord" />
		</view>
		<view class="uni-form-item uni-column">
			<view class="title font-md">确认密码</view>
			<input class="uni-input border-bottom" password type="text" placeholder="请再次输入密码" v-model="secondPassWord" />
		</view>
		<view class="uni-form-item uni-column position-relative">
			<view class="title font-md">验证码</view>
			<input class="uni-input border-bottom" password type="number" placeholder="请输入验证码" v-model="codeCorrect" />
			<button :disabled="verifyShow" @click="getPhoneCode"
				class="getPhoneCode">{{verifyShow?`${seconds}S`:codeTitle}}</button>
		</view>
		<button @click="submit" class="main-bg-color text-white mt-5 font-md">确认</button>
	</view>
</template>

<script>
	import validate from '@/utils/validate.js'
	import interceptor from "@/utils/request.js"
	import cuCustom from '@/components/common/custom.vue'
	export default {
		components: {
			cuCustom
		},
		data() {
			return {
				phoneNumber: null,
				passWord: null,
				secondPassWord: null,
				seconds: 60, //这是重新获取验证码的倒计时(可根据需求修改)
				codeCorrect: null, //正确的验证码
				verifyShow: false, //是否禁用按钮
				codeTitle: '发送验证码'
			}
		},
		methods: {
			submit() {
				// 判断手机号码格式是否正确
				let phoneIstrue = validate.validatePhoneNumber(this.phoneNumber)
				if (!phoneIstrue) {
					return false
				}
				if(this.passWord.length < 6 || this.secondPassWord.length < 6){
					uni.showToast({
						title:"密码最少是6位数",
						icon:'none'
					})
					return false
				}
				if(this.passWord !== this.secondPassWord){
					uni.showToast({
						title:"两次输入的密码不一致",
						icon:'none'
					})
					return false
				}
				if(!this.codeCorrect){
					uni.showToast({
						title:"请输入验证码",
						icon:'none'
					})
					return false
				}
				let params = {
					mobile_phone:this.phoneNumber,
					password: this.passWord,
					r_password: this.secondPassWord,
					sms_code: this.codeCorrect
				}
				interceptor.get('/supplier_applet_api.php?act=forgetPass', params).then((res) => {
					if(res.status === 1){
						uni.showToast({
							title: res.msg,
							icon: 'success',
							success() {
								uni.navigateTo({
									url: "/pagesPackage/minePackage/login/login"
								})
							}
						});
					}else{
							uni.showToast({
								title: res.msg || '服务端失败',
								icon: 'none'
							});
						}
				})
			},
			// 获取短信验证码功能
			getPhoneCode() {
				let _that = this
				let phoneIstrue = validate.validatePhoneNumber(_that.phoneNumber)
				
				if (!phoneIstrue) {
					return false
				}
				let params = {
					mobile_phone: _that.phoneNumber,
					sms_type: '5'
				}
				interceptor.get('/supplier_applet_api.php?act=sms_send',params).then((res) => {
					console.log(res)
					if(res.status == 1){
						uni.showToast({
							title: res.msg,
							icon: 'success',
							success() {
								// 进入60S 倒计时
								_that.timeDown(_that.seconds)
								_that.codeTitle = '获取验证码'
							}
						});						
						
					}else {
						uni.showToast({
							title: res.msg || '服务端失败',
							icon: 'none'
						});
					}
				})
			},
			timeDown(num) {
				let that = this
				// 计时器清零 按钮可以点击，还原计时数， 清空计数器
				if (num === 0) {
					that.verifyShow = false
					that.seconds = 60
					return clearTimeout()
				} else {
					that.verifyShow = true
					setTimeout(() => {
						that.seconds = num - 1
						that.timeDown(num - 1)
					}, 1000)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.getPhoneCode {
		position: absolute;
		right: 20upx;
		bottom: 18upx;
		border: 0 !important;
		font-size: 22upx;
		border-radius: 10upx;
		background: #eee !important;
		min-width: 200upx;
		z-index: 9;
	}
	::v-deep .uni-forms-item {
		.uni-forms-item__label {
			font-weight: 500;
			font-size: 30rpx;
			color: #393F4C;
		}
	
		.uni-easyinput__content {
			border: 0;
			border-radius: 0;
			background: transparent !important;
			border-bottom: 2px solid #E1E5ED !important;
		}
	
		.uni-select {
			border: 0;
			border-radius: 0;
			background: transparent !important;
			border-bottom: 2px solid #E1E5ED !important;
		}
	
		.uni-date-x--border {
			border: 0;
			border-radius: 0;
			background: transparent !important;
			border-bottom: 2px solid #E1E5ED !important;
		}
	
		.uni-date-x {
			background: transparent !important;
		}
	}
</style>